<template>
  
 <!-- 导航栏容器 -->
    <view class="bar-container" :style="'width:'+screenWidth+'px ;height:'+height+'px;background-color:'+backgroundColor">
        <!-- 指示器 -->
        <view class="indicator" :style="'left:'+xDiff+'px;background:'+indicatorBackground+';border:'+indicatorPadding+'px solid '+indicatorBorderColor+';width:'+indicatorSize+'px;height:'+indicatorSize+'px;top:'+(-(indicatorSize/2+indicatorPadding))+'px;'">	
            <!-- 指示器左侧的挖洞效果 -->
            <view class="indicator-before" :style="'left:-'+digHoleAngle.width+'px;width: '+digHoleAngle.width+'px;height: '+digHoleAngle.height+'px;top:'+indicatorSize/2+'px;box-shadow: 0.2px -10px 0 0 '+leftDigHoleColor+';'">
                
            </view>
            <!-- 指示器右侧的挖洞效果 -->
            <view class="indicator-after" :style="'right:-'+digHoleAngle.width+'px;width: '+digHoleAngle.width+'px;height: '+digHoleAngle.height+'px;top:'+indicatorSize/2+'px;box-shadow: -0.2px -10px 0 0 '+rightDigHoleColor+';'">
                
            </view>
            <!-- 指示器内容区域，支持插槽 -->
            <view class="indicator-content" @tap="tapIndicator">
                <slot name="indicatorContent"  ></slot>
            </view>
            
        </view>
		
		
        <view 
        v-for="(item,index) in items"
        :key="index"
        class="bar-item item-container" @tap="selectTab(index,item)" :style="'width:'+itemWidth+'px'">			
            <view v-if="item.type=='indicator'"></view>
            <view v-else class="icon">
                <image v-if="currentTab==index && item.selectedIcon" :src="item.selectedIcon.src" :style="'width: '+(item.selectedIcon.width?item.selectedIcon.width:item.icon.width)+'px;height: '+(item.selectedIcon.height?item.selectedIcon.height:item.icon.height)+'px;'"></image>
                <image v-else :src="item.icon.src" :style="'width: '+item.icon.width+'px;height: '+item.icon.height+'px;'"></image>
            </view>
            <view v-if="item.type!='indicator'" class="text" :style="'color:'+(currentTab==index?selectedColor:color)+';font-size:'+item.fontSize">
                {{item.text}}
            </view>
        </view>	
    </view>
</template>
<script>
    export default{
        props:{
			 indicatorSize: {
			                default: 60, // 修改默认大小为 60
			                type: Number
			            },
            current:{
                default:0,
                type:Number
            },
            selectedColor:{
                default:"",
                type:String
            },
            color:{
                default:"",
                type:String
            },
            height:{
                default:60,
                type:Number
            },
            backgroundColor:{
                default:"#eee",
                type:String
            },
            indicatorBackground:{
                default:"green",
                type:String
            },
            screenBackgroundColor:{
                default:"white",
                type:String
            },
            indicatorPadding:{
                default:4,
                type:Number
            },
            indicatorSize:{
                default:50,
                type:Number
            },
            
            digHolePosition:{
                default:0,//在哪个item的左侧打洞
                type:Number
            },
            digHoleAngle:{
                default:()=>{
                    return{
                        width:25,
                        height:20
                    } 
                },
                type:Object
            },
            items:{
                default:()=>[],
                type:Array
            },
            leftDigHoleColor: {
                default: "white",
                type: String
            },
            rightDigHoleColor: {
                default: "white",
                type: String
            },
			 indicatorBorderColor: {
			                default: "green", // 默认边框颜色
			                type: String
			            },
		 indicatorBackground: {
		                default: "linear-gradient(to bottom, green, lightgreen)", // 默认线性渐变色
		                type: String
		            },				
        },
        data(){
            return {
                currentTab: this.current,
                screenWidth:0            
            }
        },
        computed:{
            xDiff(){
                let indicator = this.indicatorPadding*2+this.indicatorSize
                let count = this.items.length
                return this.screenWidth/count*this.digHolePosition+(this.screenWidth/count-indicator)/2
            },
            itemWidth(){
                let count = this.items.length
                return this.screenWidth/count
            }
        },
        methods:{
            tapIndicator(){
                this.$emit("onIndicatorClick")
            },
            selectTab(index,item){
                this.currentTab = index
                this.$emit("onTabSelect",index,item)
            }
        },
        mounted() {
            
        },
        created() {
            uni.getSystemInfo({
                success: (result) => {
                    this.screenWidth = result.screenWidth
                },
                fail: (err) => {
                    //console.log(err)
                }
            })
        },
        
    }
</script>
<style>
    .bar-container {
        position: fixed;
        bottom: 0px;		
        display: flex;
    }
    
    
    .item-container {
        
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    
    .icon {		
        position: relative;
        display: flex;
        justify-content: center;
                
        
    }
    
    
    
    .icon image {
        align-self: center;
    }
    
    .text {	
        
        
        align-self: center;				
        
    }
    
    .text text {
        
        align-self: center;
    }
    
    
    .indicator{
        position: absolute;		
        border-radius: 50%;		
        
    
    }
    
    .indicator-before{
        position: absolute;	
        
        border-top-right-radius: 100%;
        background-color: transparent;
    }
    .indicator-after{		
        position: absolute;		
        
        border-top-left-radius: 100%;		
        background-color: transparent;
    }
    .indicator-content{
        /* display: flex; */
        width: 100%;
        height: 100%;
        
        
        
    }
</style>